<!DOCTYPE html>

<html>

<head>
    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>后台管理</title>

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->

    <link rel="stylesheet" href="../plugins/elementui/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/mystyle.css">
    <!-- 引入组件库 -->

    <script src="../js/vue.js"></script>

    <script src="../plugins/elementui/index.js"></script>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script src="../js/axios-0.18.0.js"></script>

    <script src="../http/request.js"></script>


</head>

<body class="hold-transition">
    <div id="app">
        <div class="app-container">
            <div class="box">

                <div class="filter-container">

                    <el-input placeholder="用户手机号" v-model="pagination.queryString"
                        style="width: 200px; margin-right: 20px;" class="filter-item"></el-input>

                    <el-button type="primary" @click="getByPhone()" class="dalfBut">查询</el-button>

                    <el-button type="success" @click="getByAddress()" class="dalfBut">地址查询</el-button>

                </div>

                <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

                    <el-table-column prop="id" type="index" align="center" label="序号"></el-table-column>

                    <el-table-column label="用户类别" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.type === 1 ? '帮手' : '用户' }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="phone" label="用户电话号" align="center"></el-table-column>

                    <el-table-column prop="address" label="用户地址" align="center"></el-table-column>

                    <!-- 跑跑币-->
                    <el-table-column prop="paopaoCoins" label="跑跑币" align="center"></el-table-column>

                    <el-table-column prop="money" label="余额" align="center"></el-table-column>

                    <el-table-column prop="state" label="状态" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.state == 1 ? '正常' : '禁用' }}
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" align="center">

                        <template slot-scope="scope">

                            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

                        </template>

                    </el-table-column>

                </el-table>

                <!-- 编辑标签弹层 -->
                <el-dialog title="用户地址" :visible.sync="editDialogFormVisible">
                    <el-form>
                        <el-form-item label="区域" :label-width="formLabelWidth">
                            <el-checkbox-group v-model="area">
                                <el-checkbox label="静园1"></el-checkbox>
                                <el-checkbox label="静园2"></el-checkbox>
                                <el-checkbox label="静园3"></el-checkbox>
                                <el-checkbox label="静园4A"></el-checkbox>
                                <el-checkbox label="静园4B"></el-checkbox>
                                <el-checkbox label="静园5A"></el-checkbox>
                                <el-checkbox label="静园5B"></el-checkbox>
                                <el-checkbox label="静园6A"></el-checkbox>
                                <el-checkbox label="静园6B"></el-checkbox>
                                <el-checkbox label="静园7A"></el-checkbox>
                                <el-checkbox label="静园7B"></el-checkbox>
                                <el-checkbox label="静园8A"></el-checkbox>
                                <el-checkbox label="静园8B"></el-checkbox>
                                <el-checkbox label="静园9A"></el-checkbox>
                                <el-checkbox label="静园9B"></el-checkbox>
                                <el-checkbox label="静园10A"></el-checkbox>
                                <el-checkbox label="静园10B"></el-checkbox>
                                <el-checkbox label="静园11A"></el-checkbox>
                                <el-checkbox label="静园11B"></el-checkbox>
                                <el-checkbox label="静园12A"></el-checkbox>
                                <el-checkbox label="静园12B"></el-checkbox>
                                <el-checkbox label="静园13A"></el-checkbox>
                                <el-checkbox label="静园13B"></el-checkbox>
                                <el-checkbox label="静园14A"></el-checkbox>
                                <el-checkbox label="静园14B"></el-checkbox>
                                <el-checkbox label="静园15A"></el-checkbox>
                                <el-checkbox label="静园15B"></el-checkbox>
                                <el-checkbox label="静园16"></el-checkbox>

                                <el-checkbox label="怡园1A"></el-checkbox>
                                <el-checkbox label="怡园1B"></el-checkbox>
                                <el-checkbox label="怡园2A"></el-checkbox>
                                <el-checkbox label="怡园2B"></el-checkbox>
                                <el-checkbox label="怡园3A"></el-checkbox>
                                <el-checkbox label="怡园3B"></el-checkbox>
                                <el-checkbox label="怡园4A"></el-checkbox>
                                <el-checkbox label="怡园4B"></el-checkbox>
                                <el-checkbox label="怡园5A"></el-checkbox>
                                <el-checkbox label="怡园5B"></el-checkbox>
                                <el-checkbox label="怡园6A"></el-checkbox>
                                <el-checkbox label="怡园6B"></el-checkbox>
                                <el-checkbox label="怡园7A"></el-checkbox>
                                <el-checkbox label="怡园7B"></el-checkbox>
                                <el-checkbox label="怡园8A"></el-checkbox>
                                <el-checkbox label="怡园8B"></el-checkbox>
                                <el-checkbox label="怡园9A"></el-checkbox>
                                <el-checkbox label="怡园9B"></el-checkbox>
                                <el-checkbox label="怡园10A"></el-checkbox>
                                <el-checkbox label="怡园10B"></el-checkbox>
                                <el-checkbox label="怡园11A"></el-checkbox>
                                <el-checkbox label="怡园11B"></el-checkbox>
                                <el-checkbox label="怡园12A"></el-checkbox>
                                <el-checkbox label="怡园12B"></el-checkbox>
                                <el-checkbox label="怡园13"></el-checkbox>
                                <el-checkbox label="怡园14"></el-checkbox>
                                <el-checkbox label="怡园15"></el-checkbox>
                                <el-checkbox label="怡园16"></el-checkbox>

                                <el-checkbox label="弘毅楼A"></el-checkbox>
                                <el-checkbox label="弘毅楼B"></el-checkbox>
                                <el-checkbox label="弘毅楼C"></el-checkbox>
                                <el-checkbox label="文锦苑1"></el-checkbox>
                                <el-checkbox label="文锦苑2"></el-checkbox>
                                <el-checkbox label="文锦苑3"></el-checkbox>
                                <el-checkbox label="文澜苑1"></el-checkbox>
                                <el-checkbox label="文澜苑2"></el-checkbox>
                                <el-checkbox label="文韬苑1"></el-checkbox>
                                <el-checkbox label="文韬苑2"></el-checkbox>
                                <el-checkbox label="文韬苑3"></el-checkbox>
                                <el-checkbox label="清逸苑1"></el-checkbox>
                                <el-checkbox label="清逸苑2"></el-checkbox>
                                <el-checkbox label="清逸苑3"></el-checkbox>
                                <el-checkbox label="清雅苑1"></el-checkbox>
                                <el-checkbox label="清雅苑2"></el-checkbox>
                                <el-checkbox label="清隽苑1"></el-checkbox>
                                <el-checkbox label="清隽苑2"></el-checkbox>
                                <el-checkbox label="清隽苑3"></el-checkbox>

                                <el-checkbox label="西操场"></el-checkbox>
                                <el-checkbox label="西餐厅"></el-checkbox>
                                <el-checkbox label="西浴"></el-checkbox>
                                <el-checkbox label="西服务中心"></el-checkbox>
                                <el-checkbox label="西篮球场"></el-checkbox>
                                <el-checkbox label="东操场"></el-checkbox>
                                <el-checkbox label="东餐厅"></el-checkbox>
                                <el-checkbox label="东浴"></el-checkbox>
                                <el-checkbox label="东服务中心"></el-checkbox>
                                <el-checkbox label="东篮球场"></el-checkbox>
                                <el-checkbox label="图书馆"></el-checkbox>
                                <el-checkbox label="体育馆"></el-checkbox>
                                <el-checkbox label="菜鸟驿站"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="editDialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="selectByAddress()">确 定</el-button>
                    </div>
                </el-dialog>

                <!-- 编辑标签弹层 -->

                <div class="add-form">

                    <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">

                        <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right"
                            label-width="100px">

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="用户类别" prop="type">
                                        <el-input v-model="formData.type" />
                                    </el-form-item>
                                </el-col>

                                <el-col :span="12">
                                    <el-form-item label="用户电话" prop="phone">
                                        <el-input v-model="formData.phone" />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="用户余额">
                                        <el-input v-model="formData.money" type="address"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="12">
                                    <el-form-item label="用户跑跑币">
                                        <el-input v-model="formData.paopaoCoins" type="address"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="用户地址">
                                        <el-input v-model="formData.address" type="address"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="12">
                                    <el-form-item label="状态">
                                        <el-switch v-model="formData.state" :active-value="1" :inactive-value="0">
                                        </el-switch>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <span style="color: red;">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用说明：1.点灭状态按钮后，表示禁用该账号</span>
                                <br />
                                <span style="color: red;">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.点击确定报错误没有余额记录，是正常现象，不用担心修改失败</span>
                                <br />
                                <span style="color: red;">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.不会对电话号和地址修改</span>
                                <br />
                                <span style="color: rgb(51, 9, 93);">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.用户类别字段：-1禁用，0普通用户，1帮手</span>
                                <br />
                                <span style="color: red;">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5.禁用用户后，如果想重新启用，需要修改用户类别并点亮状态按钮</span>
                            </el-row>

                        </el-form>

                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                            <el-button type="primary" @click="handleEdit()">确定</el-button>
                        </div>

                    </el-dialog>

                </div>

            </div>

        </div>

    </div>

</body>


<script>
    var vue = new Vue({

        el: '#app',
        data: {
            pagination: {},
            dataList: [],//当前页要展示的列表数据
            formData: {},//表单数据
            dialogFormVisible: false,//控制表单是否可见
            dialogFormVisible4Edit: false,//编辑表单是否可见
            editDialogFormVisible: false,//查询表单是否可见
            formLabelWidth: '120px',
            area: [],
            rules: {//校验规则
                type: [{ required: true, message: '帮手类别为必填项', trigger: 'blur' }],
                name: [{ required: true, message: '帮手电话号为必填项', trigger: 'blur' }]
            }
        },

        //钩子函数，VUE对象初始化完成后自动执行
        mounted() {
            this.getAll();
        },
        methods: {
            //列表
            getAll() {
                //发送ajax请求
                axios.get("/admin/").then((res) => {
                    // console.log(res.data)
                    this.dataList = res.data;
                    // console.log("dataList" + JSON.stringify(this.dataList))
                });
            },
            //根据手机号查询

            handleSizeChange: function (val) {
                alert("每页记录数变化" + val)
            },
            handleCurrentChange: function (val) {
                alert("页码发生变化" + val)
            },
            getByPhone() {
                //发送ajax请求
                axios.get("/admin/getByPhone?phone=" + this.pagination.queryString).then((res) => {
                    console.log(this.pagination.queryString)
                    console.log(res)
                    this.dataList = res.data;
                });
            },
            getByAddress() {
                this.editDialogFormVisible = true

            },
            selectByAddress(){
                axios({
                    method: 'POST',
                    url: '/admin',
                    data : this.area
                }).then((res)=>{
                    if(res.code === 1){
                        this.editDialogFormVisible = false;
                        this.dataList = res.data;
                    }else{
                        this.$message.error('查询失败')
                    }
                })
            },
            //弹出编辑窗口
            handleUpdate(row) {
                // console.log(row);   //row.id 查询条件
                //查询数据，根据id查询
                axios.get("/admin/getDA?id=" + row.id).then((res) => {
                    // console.log("formdata" + JSON.stringify(this.formData))
                    // console.log(res.data.data);
                    // console.log(res.data)
                    if (res.code === 1) {
                        // console.log(res)
                        //展示弹层，加载数据
                        this.dialogFormVisible4Edit = true;
                        this.formData = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },
            // 删除
            handleDelete(row) {
                //1.弹出提示框
                this.$confirm("此操作永久删除当前数据，是否继续？", "提示", {
                    type: 'info'
                }).then(() => {
                    //2.做删除业务
                    axios.delete("/admin/delete/" + row.id).then((res) => {
                        console.log(res)
                        if (res.code === 1) {
                            this.$message.success("删除成功");
                        } else {
                            this.$message.error("删除失败");
                        }
                    }).finally(() => {
                        this.getAll();
                    });
                }).catch(() => {
                    //3.取消删除
                    this.$message.info("取消删除操作");
                });
            },
            //编辑
            handleEdit() {
                //发送ajax请求
                axios.put("/admin/saveInfo", this.formData).then((res) => {
                    console.log(this.formData)

                    //如果操作成功，关闭弹层，显示数据
                    if (res.code === 1) {
                        this.dialogFormVisible4Edit = false;
                        this.$message.success("修改成功");
                    } else if (res.code === 0) {
                        this.$message.error(res.msg);
                    } else {
                        this.$message.error(res.msg);
                    }
                }).finally(() => {
                    this.getAll();
                });
            },
        },
    })

</script>

</html>